<template>
	<view style="position: relative;" class="container bh-row bh-justify-start" @tap="() => { }">
		<!-- <view style="width: 18rpx;height: 18rpx;
		background-color: #39B542;position: absolute;"></view> -->
		<view v-if="item.userDto.imUserStatus==1" style="color: #39B542;position: absolute;
    right: 10rpx;
    top: 10rpx;
    font-size: 22rpx;">在线</view>
		<view style="position: relative;">
			<video class="left-img" show-center-play-btn="false" play-btn-position="bottom" show-progress=false v-if="item.shopVideo" controls="false" :src="item.shopVideo"></video>
			<view style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.1);">
			</view>
			<view v-if="item.shopVideo && item.userDto && item.userDto.mgr == 1" class="platform-label">平台代发</view>
		</view>

		<view style="position: relative;">
			<image class="left-img" v-if="!item.shopVideo" :src="item.facadePicture.split(',')[0]" mode="scaleToFill" />
			<view v-if="!item.shopVideo && item.userDto && item.userDto.mgr == 1" class="platform-label">平台代发</view>
		</view>

		<view class="right-wrap bh-col" style="width: 400rpx;">
			<view class="ritht-title-wrap bh-row mb10">
				<view class="right-title f32 fw600 white-space1">{{ title }}</view>
			</view>
			<view class="ritht-area-wrap bh-row mb10">
				<view class="right-area f24">
					<image src="../../static/images/address.png" mode="" class="address"></image>
					{{ item.area }}
				</view>
			</view>
			<view v-if="item.labelDtoList && item.labelDtoList.length > 0" class="right-label-wrap bh-row mb10">
				<view v-for="(item1, index1) in item.labelDtoList" :key="index1" v-show="index1 < 3" class="right-label f24 mr10">{{ item1.labelName }}</view>
			</view>
			<view style="width: 100%;" class="right-rent-wrap bh-row">
				<view class="right-rent fw600 mr20 f24">租</view>
				<view class="right-rent-money fw600 f34">{{ item.rent }}</view>
				<view class="right-rent-unit">/月</view>
				<view style="flex: 1;
    text-align: right;
    color: #999;
    font-weight: normal;
    align-items: center;
    display: flex;
    justify-content: flex-end;">
	<image style="width: 32rpx;
    height: 32rpx;
    border-radius: 50%;
    margin-right: 16rpx;" :src="item.userDto.avatarUrl"></image>
	<text>{{item.updateTimeDesc}}</text>
	<!-- <text v-if="item.userDto.imUserStatus==1" style="color: #39B542;">·在线</text> -->
	</view>
			</view>
		</view>
	</view>
</template>
<script>
import { PostUtils } from '@/components/post_item/post_add_sell_dto';
import { CustomDict } from '@/components/custom_views/custom_dict';
import { Dict } from '@/components/custom_views/dict';
import { CustomDate } from '../../components/custom_views/custom_date';

export default {
	options: {
		styleIsolation: 'shared'
	},
	name: 'postItemMyCollectSell',
	components: {},
	props: {
		item: {
			type: Object,
			default: function () {
				return {};
			}
		}
	},
	data() {
		return {}
	},
	methods: {},
	computed: {
		title() {
			return PostUtils.getTitle(this.item)
			// let industryName = CustomDict.getDictName(this.item.industryId, Dict.IndustryTypeEnum)
			// console.log('解析出行业名称', this.item.industryId, industryName)
			// return this.item.street + industryName + '转店'
		},
		fmtUpdateTime(updateTime){
			return CustomDate.formatRelativeDate(updateTime)
		}
	}
}
</script>
<style scoped lang="scss">
@import url(../../static/css/base.css);

.container {
	border-radius: 8rpx;
	background: #FFFFFF;
	padding: 30rpx 20rpx;
	box-sizing: border-box;

	width: 686rpx;
	margin: auto;
	margin-bottom: 30rpx;

	.address {
		width: 20rpx;
		height: 22rpx;
	}
}

.left-img {
	width: 220rpx;
	height: 192rpx;
	border-radius: 8rpx;
	display: block;
}

.platform-label {
	position: absolute;
    left: 0;
    top: 0;
    font-size: 24rpx;
    font-weight: 600;
    padding: 3rpx 10rpx 3rpx 10rpx;
    opacity: 1;
    /* border-top-left-radius: 30rpx; */
    /* border-bottom-left-radius: 30rpx; */
    border-bottom-right-radius: 8rpx;
    background: #F8D247;
}

.right-wrap {
	color: #333333;
	font-weight: 500;
	font-size: 32rpx;
	margin-left: 22rpx;

	.right-title-wrap {
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
		margin-bottom: 22rpx;

		.right-title {}
	}

	.right-area-wrap {
		margin-bottom: 22rpx;
		font-size: 24rpx;
		font-weight: normal;

		color: #999999;

		.right-area {}
	}

	.right-label-wrap {

		.right-label {
			border-radius: 4rpx;
			background: #F5F6F6;
			padding: 8rpx 16rpx;
			font-size: 22rpx;
			font-weight: 600;
			color: #666;
			white-space: nowrap;
		}
	}

	.right-rent-wrap {
		font-size: 24rpx;
		color: #F87147;

		.right-rent {
			width: 34rpx;
			height: 34rpx;
			text-align: center;
			border-radius: 4rpx;
			box-sizing: border-box;
			border: 1px solid #F87147;
			font-size: 20rpx;
			color: #F87147;
			font-weight: 600;
		}

		.right-rent-money {
			color: #F87147;
		}

		.right-rent-unit {
			font-weight: 400;
			font-size: 24rpx;
			color: #F87147;
		}
	}
}
</style>